<template>
  <div class="cata">
    <!-- 前往搜索 -->
    <to-search></to-search>
    <div class="con">
    <!-- 左侧 -->
      <div class="left">
        <div v-for="(item,index) in arr" :key="item.id" :class="index==n?'active':''" @click="clickleft(index)">{{item.catename}}</div>
        <div></div>
      </div>
      <div class="right">
        <div class="item"  ref="item" v-for="item in arr" :key="item.id">
          <div class="h2">{{item.catename}}</div>
          <div class="content">
            <div class="i" v-for="i in item.children" :key="i.id" @click="$router.push('/list?id='+item.id+'&type=2')">
              <img :src="$pre+i.img" alt="" class="img" />
              <div class="text">{{i.catename}}</div>
            
            </div>
              <van-empty v-if="!item.children" description="暂无数据" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqcate } from "../../http/http";
export default {
  data(){
    return{
      arr:[],
      n:""
    }
  },
  mounted() {
    reqcate().then(res=>{
      this.arr=res.data.list
    })
  },
  methods:{
    clickleft(index){
      this.n=index;
      //右侧滚动
    this.$refs.item[this.n].scrollIntoView({
        behavior: "smooth",
        
      })
    }
  }
};
</script>

<style scoped lang="less">
@import "../../less/index.less";

.cata {
  background: #f4f4f4;
  .con {
    height: calc(100vh - @headerHeight - 54px);

    display: flex;

    .left {
      width: 2.3rem;
      margin-right: @margin10;
      background: white;
      font-size: @font-p;
      div {
        text-align: center;
        line-height: 0.6rem;
        margin-top: @margin10 * 5;
      }
      .active {
        color: @primary;
      }
    }
    .right{
      flex: 1;
      height: 100%;
      overflow-y: auto;
      .item{
        margin: @margin10;
        background: @white;
        .h2{
          font-weight: bold;
          line-height: 60px;
        }
        .content{
          overflow: hidden;
          .i{
            float: left;
            width: 33.33%;
            text-align: center;
            .img{
              width: 80px;
              height: 80px;
              border-radius:5px ;
            }
            .text{
              font-size: @font-p;
            }
          }
        }
      }
    }
  }
}
</style>
